<template>
    <div class="container">
        <div class="content">
            <div class="top">
                <img src="./img/icon_arrow_left_black.png" @click="back()"/>
                <span>有品收银台</span>
            </div>
            <div class="middle">
                <div><span>￥</span><span>{{sum}}.00</span></div>
            </div>
        </div>
        <div class="footer">
            <div class="pay" @click="payment()">
                <div>
                    <span>确认支付</span> 
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { OrderApi } from '../../api';

export default {
    name:"Pay",
    data(){
        return{
            goodsList:[],
	        sum:''
        }
    },
    async created() {
        try {
               this.goodsList= await OrderApi.getUnpay();
	        this.sum=await OrderApi.account(this.$route.params.cid)
        } catch {/*  */ }
    },
    methods:{
        async back() {
            try{
                await this.$miConfirm("确定要取消支付吗?");
                this.$router.push({
	                path:"/order"
	                }
                )
            }catch(e){/**/}  
        },
	async payment(){
                try{
			await OrderApi.pay(this.$route.params.cid)
                        this.$router.push({
                                        path:"/order"
                                }
                        )
                }catch(e){/**/}
	}
    },
}
</script>

<style scoped>
.container{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: rgba(245, 245, 245, 0.84);
}
.content{
    flex-grow: 1; 
}
.top{
    display: flex;
    align-items: center;
}
.top img{
    width: 39px;
    height: 48px;
}
.top span{
    font-size: 18px;
    margin-left: 130px;
}
.middle{
    text-align: center;
}
.middle div{
    color: rgb(248, 36, 0);
    font-size: 31px;
    font-weight: 500;
}
.middle div span:nth-child(3),
.middle div span:nth-child(1){
	font-size: 19px;
}
.middle div span{
    font-size: 28px;
}
.footer{
    flex-shrink: 0;
    height: 53px;
    border-top: 1px solid rgb(237, 237, 237);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pay{
    width: 345px;
    height: 38px;
    background: linear-gradient(to right, rgb(255, 106, 0), rgb(248, 36, 0));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pay div{
    color: rgb(255, 255, 255);
    font-size: 15px;
    font-weight: 500;
}


</style>